<template>
  <div style="width: 100%; height: 100%">
    <div :id="id" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart1",
    },
    update: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      myChart:null
    };
  },
  computed:{
    resize(){
      return this.$store.state.chartSize;
    }
  },
  watch: {
     resize(val){
      this.$nextTick(()=>{
        this.myChart.resize()
      })
    }
  },
  methods: {
    drawPie(val) {
      if (this.myChart) {
        this.myChart.clear();
      }

      this.myChart = echarts.init(document.getElementById(this.id));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 10,
        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            // avoidLabelOverlap: true,
            label: {
              show: true,
              //   position: "center",
            },
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    fontSize: "18",
                  },
                },
                color: function (param) {
                  let colorList = ["#ff8c00", "#1890ff"];
                  let x = "";
                  param.dataIndex % 2 == 0 ? (x = 1) : (x = 2);
                  if (x == "1") {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                },
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: val,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>